﻿<template>
  <div>
    <el-dialog v-drag :title = 'dialogTitle' :visible.sync = 'dialogFormVisible' width = '60%' @close = "closeDialog">
      <el-form :model = "ruleSearchForm" ref = "ruleSearchForm" :rules = 'rulesSearch'>
        <div class='page_tableContent'>
          <el-table :data='ruleSearchForm.searchInfoTable' style='width:100%' empty-text='暂无查询条件，请立即添加' border stripe class='editTable'>
            <el-table-column align='center' label='条件编号' :render-header='handelHelp' label-class-name="条件编号,没有则给空">
              <template slot-scope='scope'>
                <el-form-item>
                  <el-input v-model="scope.row.condition_id" placeholder="请输入"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align='center' label='栏位名称' :render-header='handelHelp' label-class-name="从关联的元数据表中选择栏位，栏位名称不能为空">
              <template slot-scope='scope'>
                <el-form-item :prop="'searchInfoTable[' + scope.$index + '].column_name'" :rules='rulesSearch.column_name'>
                  <el-select v-model="scope.row.column_name" placeholder="请选择" filterable @change='changeSearchColum(scope.row)'>
                    <el-option v-for='(item, index) in searchColumnList' :key='index'
                    :label="item.column_desc ? item.column_name + '(' + item.column_desc + ')' : item.column_name" :value="item.column_name"></el-option>
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align='center' label='查询方式' :render-header='handelHelp' label-class-name="查询方式">
              <template slot-scope='scope'>
                <el-form-item>
                  <el-select v-model="scope.row.op" placeholder="请选择" filterable @focus='getSelectOption(scope.row)'>
                    <el-option v-for='item in scope.row.selectOptions' :key='item.value' :label='item.text' :value='item.value'></el-option>
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align='center' label='参数名称' :render-header='handelHelp' label-class-name="相关的参数名称,做查询条件时页面传入的参数名称,参数由数字、字母、下划线组成，并以英文开头，不可为空">
              <template slot-scope='scope'>
                <el-form-item :prop="'searchInfoTable[' + scope.$index + '].parameter_name'" :rules='rulesSearch.parameter_name'>
                  <el-input v-model="scope.row.parameter_name" placeholder="请输入"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align='center' label='标签提示' :render-header='handelHelp' label-class-name="标签提示说明">
              <template slot-scope='scope'>
                <el-form-item>
                  <el-input v-model="scope.row.tips" placeholder="请输入"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align='center' width='80' label='是否必输' :render-header='handelHelp' label-class-name="表示该栏位是否为必输的">
              <template slot-scope='scope'>
                <el-form-item>
                  <el-switch v-model="scope.row.check_required"></el-switch>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align='center' label='正则检查' :render-header='handelHelp' label-class-name="对该栏位输入规则的正则表达式检查">
              <template slot-scope='scope'>
                <el-form-item>
                  <el-input v-model="scope.row.check_regex" placeholder="请输入"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align="center" label='操作' width='70'>
              <template slot-scope="scope">
                <el-button type='text' @click="deleteSearchItem(scope.$index)"><i class='iconfont icon-shanchu'></i>删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 底部按钮和页码部分 -->
        <div class='page_bottomContent'>
          <div class='page_btnsContent'>
            <el-form-item class='form_noLeftMargin'>
              <el-button type="primary" @click='addSearchItem ()'>添加查询条件</el-button>
              <el-button type='primary' @click="resetSearchForm ('ruleSearchForm')">取 消</el-button>
              <el-button type="primary" @click="submitSearchForm ('ruleSearchForm')">确 定</el-button>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ['showAddSearchDialog', 'metaUid', 'searchList', 'searchColumnList'],
  data () {
    return {
      dialogTitle: '新增查询条件',
      dialogFormVisible: false,
      ruleSearchForm: {
        searchInfoTable: [
          {
            condition_id: '',
            op: '',
            column_name: '',
            parameter_name: '',
            tips: '',
            check_required: false,
            check_regex: '',
            // 选择字段后出现的查询条件列表
            selectOptions: []
          }
        ]
      },
      rulesSearch: {
        column_name: [
          {required: true, message: '栏位名称不能为空', trigger: 'blur'}
        ],
        parameter_name: [
          {required: true, message: '查询的参数名称不能为空', trigger: 'blur'},
          {pattern: /^[a-zA-Z][_a-zA-Z0-9/-]*$/, message: '由英文、数字、下划线组成,并以英文开头', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    // 表头的提示信息
    handelHelp (h, {column}) {
      if (column.labelClassName) {
        return (
          <el-tooltip effect="dark" placement="top">
            <div slot='content'>{column.labelClassName}</div>
            <span>{column.label}</span>
          </el-tooltip>
        )
      }
    },
    // 新增查询信息
    addSearchItem () {
      this.ruleSearchForm.searchInfoTable.push({
        condition_id: '',
        op: '',
        column_name: '',
        parameter_name: '',
        tips: '',
        check_required: false,
        check_regex: '',
        meta_uid: this.metaUid,
        // 选择字段后出现的查询条件列表
        selectOptions: []
      })
    },
    // 栏位名称改变时
    changeSearchColum (row) {
      row.op = ''
    },
    // 选择查询方式时
    getSelectOption (row) {
      if (row.column_name && this.searchColumnList.length) {
        this.searchColumnList.forEach(val => {
          if (val.column_name === row.column_name) {
            this.$set(row, 'selectOptions', val.op_select_options)
          }
        })
      } else {
        row.selectOptions = []
      }
    },
    // 删除一条查询信息
    deleteSearchItem (index) {
      this.$confirm('此操作将永久删除该查询条件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        cancelButtonClass: 'el-button--info'
      }).then(() => {
        this.ruleSearchForm.searchInfoTable.splice(index, 1)
        this.$message({
          message: '删除成功',
          type: 'success'
        })
      }).catch(() => {})
    },
    // 点击取消按钮时
    resetSearchForm (forms) {
      this.$refs[forms].clearValidate()
      this.$emit('giveUpSearch')
    },
    // 点击上部的X关闭弹窗时
    closeDialog () {
      this.$emit('giveUpSearch')
      this.$refs.ruleSearchForm.clearValidate()
    },
    // 点击确定提交的按钮时
    submitSearchForm (forms) {
      this.$refs[forms].validate((valid) => {
        if (valid) {
          let toParent = JSON.parse(JSON.stringify(this.ruleSearchForm.searchInfoTable))
          let submitArray = []
          if (toParent.length) {
            toParent.forEach(Pval => {
              let objExam = {}
              for (let key in Pval) {
                if (key !== 'selectOptions') {
                  objExam[key] = Pval[key]
                }
              }
              submitArray.push(objExam)
            })
          }
          this.$emit('successSearch', submitArray)
        } else {
          return false
        }
      })
    }
  },
  watch: {
    showAddSearchDialog: {
      handler: function (val, oldVal) {
        this.dialogFormVisible = val
        if (val) {
          this.ruleSearchForm.searchInfoTable = this.searchList
        }
      },
      deep: true
    }
  }
}
</script>
